<template>
  <div class="comment-item">
    <Avatar
      :width="replyLevel == 1 ? 50 : 30"
      :avatar="data.avatar"
      :user-id="data.userId"
    ></Avatar>
    <div class="comment-content-panel">
      <div class="nick-name-panel">
        <router-link :to="`/user/${data.userId}`" class="nick-name">
          {{ data.nickName }}
        </router-link>
        <template v-if="data.replyUserId">
          <div class="reply-title">回复</div>
          <router-link :to="`/user/${data.replyUserId}`" class="reply-nick-name">
            @{{ data.replyNickName }}
          </router-link>
        </template>
      </div>
      <div class="comment-message">
        <Tag :type="0" v-if="data.topType == 1"></Tag>
        <span v-html="resetHtmlContent(data.content)"></span>
      </div>
      <div class="image-show" v-if="data.imgPath">
        <Cover :source="data.imgPath + `_thumbnail.jpg`" :preview="true" fit="cover"></Cover>
      </div>
      <div class="comment-op">
        <div class="op-left">
          <div class="comment-time">{{ data.postTime }}</div>
          <div
            :class="['iconfont', 'icon-good', data.likeCountActive ? 'active' : '']"
            @click="doLike(data)"
          >
            {{ data.likeCount == 0 ? '' : data.likeCount }}
          </div>
          <div
            :class="['iconfont', 'icon-no-good', data.hateCountActive ? 'active' : '']"
            @click="doHateLike(data)"
          >
            {{ data.hateCount == 0 ? '' : data.hateCount }}
          </div>
          <div class="reply-btn" @click="showReplyHandler(data, replyLevel)">回复</div>
        </div>
        <el-dropdown
          v-if="
            data.userId == homeStore.userInfo?.userId ||
            videoInfoDetail?.videoInfo.userId == homeStore.userInfo?.userId
          "
        >
          <span class="op-right iconfont icon-more"></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                @click="topComment"
                v-if="
                  videoInfoDetail?.videoInfo.userId == homeStore.userInfo?.userId &&
                  data.pcommentId == 0
                "
              >
                {{ data.topType == 1 ? '取消置顶' : '置顶' }}
              </el-dropdown-item>
              <el-dropdown-item
                @click="delComment"
                v-if="
                  videoInfoDetail?.videoInfo.userId == homeStore.userInfo?.userId ||
                  data.userId == homeStore.userInfo?.userId
                "
              >
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <!-- 自己调自己的组件 -->
      <div class="reply-list">
        <VideoCommentItem
          v-for="item in data.children"
          :data="item"
          :reply-level="2"
        ></VideoCommentItem>
      </div>
      <VideoCommentSend v-if="replyLevel == 1 && data.showReply" :send-type="1"></VideoCommentSend>
    </div>
  </div>
</template>

<script setup lang="ts">
import VideoCommentItem from './VideoCommentItem.vue'
import Tag from '@/components/Tag.vue'
import { useHomeStore } from '@/stores/home'
import { resetHtmlContent } from '@/utils/utilsFun'
import { inject, nextTick, withDefaults } from 'vue'
import { useRoute } from 'vue-router'
import VideoCommentSend from './VideoCommentSend.vue'
import { mitter } from '@/eventbus/eventBus'
import {
  cancelTopCommentHttpRequest,
  topCommentHttpRequest,
  userDelCommentHttpRequest,
  VideoDoActionHttpRequest
} from '@/services/api/video'
import { ACTION_TYPE } from '@/utils/Constants'
import { confirmMessageBox } from '@/utils/confirm'

const route = useRoute()
const homeStore = useHomeStore()

const props = withDefaults(
  defineProps<{
    data: any
    replyLevel?: number
  }>(),
  {
    replyLevel: 1
  }
)

const showReply: any = inject('showReply')

const videoInfoDetail: any = inject('videoInfo')
//点赞
const doLike = async (data: any) => {
  await VideoDoActionHttpRequest({
    videoId: route.params.videoId as string,
    actionType: ACTION_TYPE.COMMENT_LIKE.value,
    commentId: data.commentId
  })
  //处理页面的数据
  if (data.hateCountActive) {
    data.hateCountActive = false
    data.hateCount--
  }
  if (data.likeCountActive) {
    data.likeCountActive = false
    data.likeCount--
  } else {
    data.likeCountActive = true
    data.likeCount++
  }
}
//踩
const doHateLike = async (data: any) => {
  await VideoDoActionHttpRequest({
    videoId: route.params.videoId as string,
    actionType: ACTION_TYPE.COMMENT_HATE.value,
    commentId: data.commentId
  })
  //处理页面的数据
  if (data.likeCountActive) {
    data.likeCountActive = false
    data.likeCount--
  }
  if (data.hateCountActive) {
    data.hateCountActive = false
    data.hateCount--
  } else {
    data.hateCountActive = true
    data.hateCount++
  }
}
//回复评论
const showReplyHandler = (data: any, replyLevel: number) => {
  //点击回复展示输入信息框
  showReply(replyLevel == 1 ? data.commentId : data.pcommentId)
  nextTick(() => {
    const commentData = {
      replyCommentId: data.commentId,
      nickName: data.nickName
    }
    mitter.emit('initCommentData', commentData)
  })
}
//置顶评论
const topComment = () => {
  confirmMessageBox({
    message: `确认要${props.data.topType == 1 ? '取消置顶' : '置顶'}评论吗？`,
    onConfirm: async () => {
      const res =
        props.data.topType == 1
          ? await cancelTopCommentHttpRequest(props.data.commentId)
          : await topCommentHttpRequest(props.data.commentId)
      mitter.emit('topCommentCallback')
    }
  })
}
//删除评论
const delComment = () => {
  confirmMessageBox({
    message: `确认要删除评论吗？`,
    onConfirm: async () => {
      const res = await userDelCommentHttpRequest(props.data.commentId)
      mitter.emit('delUserCommentCallback', {
        commentId: props.data.commentId,
        pcommentId: props.data.pcommentId
      })
    }
  })
}
</script>

<style lang="less" scoped>
.comment-item {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  .comment-content-panel {
    flex: 1;
    margin-top: 5px;
    margin-left: 15px;
    .nick-name-panel {
      font-size: 14px;
      display: flex;
      align-items: center;
      vertical-align: middle;
      .nick-name {
        text-decoration: none;
        color: var(--text2);
      }
      .reply-title {
        margin: 0px 3px;
      }
      .reply-nick-name {
        text-decoration: none;
        color: var(--blue3);
      }
    }
    .comment-message {
      font-size: 14px;
      line-height: 20px;
      margin-top: 5px;
    }
    .image-show {
      margin-top: 10px;
      width: 100px;
      height: 100px;
    }
    .comment-op {
      margin-top: 10px;
      display: flex;
      color: var(--text3);
      align-items: center;
      font-size: 13px;
      justify-content: space-between;
      .op-left {
        display: flex;
        .comment-time {
          margin-right: 20px;
        }
        .iconfont {
          font-size: 13px;
          margin-right: 20px;
          cursor: pointer;
          &::before {
            font-size: 15px;
            margin-right: 5px;
          }
        }
        .active {
          &::before {
            color: var(--blue2);
          }
        }
        .reply-btn {
          cursor: pointer;
        }
      }
      .op-right {
        cursor: pointer;
        margin-left: 5px;
      }
    }
  }
}
.reply-list {
  .comment-item {
    border-bottom: none;
  }
  .comment-content-panel {
    .nick-name-panel {
      float: left;
      margin-right: 5px;
    }
    .comment-message {
      margin-top: 0;
    }
  }
}
</style>
